<script setup name="AnnualFeeFj">
import { ElMessageBox } from 'element-plus'
import Message from 'vue-m-message'
import { useDict } from '@/utils/dict.js'
import annualFeeService from '@/api/annualFee/index.js'
import SvgIcon from '@/components/SvgIcon/index.vue'
import Toolbar from '@/components/Toolbar/Toolbar.vue'
import { tableCheckChane } from '@/utils/index.js'
import { yearFeeFjSearchConfig, yearFeeFjTableColumns } from '@/views/system/annualFee/yearFeeConfig.js'

const { proxy } = getCurrentInstance()
const pagerConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
const ids = ref([])
const tableData = ref([])
const queryParam = ref({})

const feeReductionRatioOptions = ref([])
const payByCustomerSelfDialogVisible = ref(false)
const payByCustomerSelFieldList = ref([])
const { discount_rate } = useDict('discount_rate')
const payByCustomerSelParams = ref({})

onMounted(() => {
  getList()
})

function getList() {
  const params = {
    ...queryParam.value,
    pageNum: pagerConfig.value.currentPage,
    pageSize: pagerConfig.value.pageSize,
  }
  annualFeeService.listToDiscount(params).then((res) => {
    if (res.code === 200) {
      tableData.value = res.rows
      pagerConfig.value.total = res.total
    }
  })
}

function handlePageChange({ currentPage, pageSize }) {
  pagerConfig.value.currentPage = currentPage
  pagerConfig.value.pageSize = pageSize
  getList()
}

function handleCheckChange(data) {
  ids.value = tableCheckChane(data, 'annualfeeId', ids.value)
}

function handleExport() {
  proxy.download('', { ...queryParam.value, exportIds: ids.value.join(',') }, `_${new Date().getTime()}.xlsx`)
}

function handleSearch(params) {
  queryParam.value = params
  pagerConfig.value.currentPage = 1
  console.log(yearFeeFjSearchConfig)
  getList()
}

function handlePayByCustomerSelf(row) {
  const formList = [
    {
      label: '费减开始年度',
      field: 'discountStartYear',
      type: 'number',
      rules: [
        { required: true, message: '请输入费减开始年度', trigger: 'blur' },
      ],
    },
    {
      label: '费减比例',
      field: 'discountRate',
      type: 'select',
      options: {
        data: discount_rate.value,
      },
    },
  ]
  if (row) {
    formList.push({
      label: '',
      field: 'discountFile',
      type: 'upload',
      fileType: ['pdf'],
      limit: 1,
      span: 24,
      tips: '费减',
      labelWidth: '0px',
    })
  }
  payByCustomerSelFieldList.value = formList
  payByCustomerSelParams.value.annualfeeIds = row?.annualfeeId || ids.value.join(',')
  payByCustomerSelfDialogVisible.value = true
}

function handlePayByCustomerSelfSubmit() {
  annualFeeService.discountBatch(payByCustomerSelParams.value).then((res) => {
    if (res.code === 200) {
      Message.success('费减成功')
      handleDialogClose()
      getList()
    }
  })
}

function handleDialogClose() {
  payByCustomerSelParams.value = {}
  payByCustomerSelfDialogVisible.value = false
}

function handleEditRemark(row) {
  const { remark } = row
  ElMessageBox.prompt('请输入备注', '提示', {
    inputType: 'textarea',
    inputValue: remark,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        annualFeeService.update({ ...row, remark: instance.inputValue }).then((res) => {
          const code = res.code
          if (code === 200) {
            Message.success('修改成功')
            done()
          }
        })
      }
      else {
        done()
      }
    },
  }).then((res) => {
    getList()
  })
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="">
      <SearchBar :search-config="yearFeeFjSearchConfig" @search="handleSearch" />
    </el-card>
    <el-card shadow="never" class="mt-2">
      <Toolbar>
        <el-button
          v-hasPermi="['system:annualFee:discountBatch']"
          type="primary"
          :disabled="ids.length === 0"
          class="el-gradient-pink"
          @click="handlePayByCustomerSelf()"
        >
          批量费减
          <SvgIcon name="f7:money-yen" type="iconify" class="text-[#FE1FC4] bg-white w-4 h-4 rounded-full ml-2 " />
        </el-button>
        <el-button
          v-hasPermi="['system:annualFee:export']"
          type="warning"
          class="el-gradient-warning"
          @click="handleExport()"
        >
          导出
          <el-icon class="el-icon--right">
            <FolderAdd />
          </el-icon>
        </el-button>
      </Toolbar>
      <vxe-grid
        :row-config="{
          keyField: '',
        }"
        :data="tableData"
        :columns="yearFeeFjTableColumns"
        :pager-config="pagerConfig"
        header-cell-class-name="headerCellClass"
        @page-change="handlePageChange"
        @checkbox-all="handleCheckChange"
        @checkbox-change="handleCheckChange"
        max-height="580px"
      >
        <template #actions="{ row }">
          <span v-if="row.isDiscount === '1'">
            <el-button
              v-hasPermi="['system:annualFee:discountBatch']"
              size="small"
              text
              type="primary"
              @click="handlePayByCustomerSelf(row)"
            >
              费减
            </el-button>
          </span>
          <el-button
            v-hasPermi="['system:annualFee:edit']"
            size="small"
            text
            type="success"
            @click="handleEditRemark(row)"
          >
            修改备注
          </el-button>
        </template>
      </vxe-grid>
    </el-card>
    <el-dialog
      v-model="payByCustomerSelfDialogVisible"
      class="custom-dialog"
      width="40%"
      @close="handleDialogClose"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            费减
          </span>
        </div>
      </template>
      <base-form
        :field-list="payByCustomerSelFieldList"
        :model="payByCustomerSelParams"
        :options="{
          labelWidth: '110px',
          footerAlign: 'center',
        }"
        @submit="handlePayByCustomerSelfSubmit"
        @cancel="handleDialogClose"
      />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>

</style>
